<template>
	<view class="login">
		<u-navbar title="登录" :autoBack="true"
			titleStyle="color:#d1f5f8;margin-left:-73%;margin-top:-0.5%;font-size:30rpx;" leftIconSize="30rpx"
			leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
		<view class="login_content">
			<h4 style="text-align: center;">欢迎登录</h4>
			<u--form labelPosition="left" :model="loginForm" :rules="rules" ref="formRef" labelStyle="font-size:30rpx;">
				<u-form-item prop="studentId" ref="item1">
					<u--input type="number" v-model="loginForm.studentId" customStyle="height:70rpx;"
						prefixIcon="account" placeholder="请输入学号" placeholderStyle="color:#4f63e7;font-size:20rpx"
						prefixIconStyle="color:#4f63e7;font-size:40rpx" fontSize="30rpx" shape="circle"></u--input>
				</u-form-item>
				<u-form-item prop="password" ref="item2">
					<u--input :type="pwdStatus.type" v-model="loginForm.password" customStyle="height:70rpx;"
						placeholder="请输入密码" prefixIcon="lock" placeholderStyle="color:#4f63e7;font-size:20rpx"
						prefixIconStyle="color:#4f63e7;font-size:40rpx" fontSize="30rpx" shape="circle">
						<template #suffix>
							<up-image :src="pwdStatus.src" width="50rpx" height="50rpx"
								@click="changeStatus"></up-image>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item prop="schoolId" ref="item3">
					<text style="margin-left:15rpx"><u-icon name="home" size="40rpx" color="#4f63e7"></u-icon></text>
					<uni-combox :candidates="schools" placeholder="请选择所在学校" v-model="loginForm.schoolId"
						labelWidth="500px" :border="false"></uni-combox>
				</u-form-item>
				<view style="width: 70%; margin: 30rpx auto;">
					<u-button type="primary" text="点击登录" size="large" @click="login" throttleTime="1500"></u-button>

				</view>
				<view style="margin: 20rpx auto;text-align: center; color: #3c9cff;font-size: 23rpx;"
					@click="toRegister">
					点击注册
				</view>

				<view style="float:right;color: blue;font-size: 20rpx;">
					<navigator url="/pages/login-phone/login-phone" style="display: flex;">
						<u-icon name="phone" color="#3c9cff" size="30rpx"></u-icon>
						<u-text type="primary" text="手机号登录" size="25rpx" margin="-5rpx 0 0 0"></u-text>
					</navigator>

				</view>
			</u--form>
			<view
				style="margin:0rpx auto;width: 80%; margin-top:100rpx;margin-bottom:60rpx;display: flex;flex-direction: column;">
				<view style="text-align: center;font-size: 20rpx;margin-bottom: 20rpx;color:#3c9cff">更多登录方式</view>
				<view style="display: flex;justify-content: space-around;">
					<u-icon name="weibo" size="45rpx" color="#3c9cff"></u-icon>
					<u-icon name="weixin-fill" size="45rpx" color="#3c9cff"></u-icon>
					<u-icon name="qq-fill" size="45rpx" color="#3c9cff"></u-icon>
				</view>
			</view>
			<view style="position: absolute;bottom: 20rpx;right: 20rpx;font-size: 25rpx;color: #3c9cff;">
				忘记密码?
			</view>
		</view>
		<!-- 登陆失败的提示 -->
		<u-modal :show="loginFailShow" content="登录失败,请稍后重试" @confirm=" closeLoginFailShow"></u-modal>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from "@/stores/userStore.js"
	import {
		useSchoolStore
	} from "@/stores/schoolStore.js"
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import md5 from "js-md5"
	const userStore = useUserStore();
	const schoolStore = useSchoolStore();
	const pwdStatus = reactive({
		src: "/static/images/hide.png",
		type: "password"
	})

	function changeStatus() {
		if (pwdStatus.type == "password") {
			pwdStatus.type = "text",
				pwdStatus.src = "/static/images/show.png"
		} else {
			pwdStatus.type = "password",
				pwdStatus.src = "/static/images/hide.png"
		}
	}
	//验证规则
	const rules = reactive({
		studentId: [{
				type: 'string',
				required: true,
				message: '请输入学号',
				trigger: ['blur', 'change'],
			},
			{
				pattern: /^[0-9]{6,12}$/,
				// 正则检验前先将值转为字符串
				required: true,
				message: '学号在6-12位之间',
				trigger: ['blur', 'change']
			}
		],
		password: {
			type: 'string',
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change'],
		},

		schoolId: {
			type: 'string',
			required: true,
			message: '请选择学校',
			trigger: ['blur', 'change'],
		}
	})
	let loginForm = reactive({
		studentId: '',
		password: '',
		schoolId: ''
	})
	const schools = reactive([]);
	const formRef = ref()

	function toRegister() {
		uni.navigateTo({
			url: "/pages/register/register"
		})
	}
	const loginFailShow = ref(false);

	function closeLoginFailShow() {
		loginFailShow.value = false
	}

	function login() {

		formRef.value.validate().then(async res => {
			//表单验证通过
			//模拟登录成功
			schoolStore.schoolList.forEach((p) => {
				if (p.schoolName == loginForm.schoolId) {
					loginForm.schoolId = p.schoolId;
					return;
				}
			})
			loginForm.password = md5(loginForm.password)
			await userStore.login(loginForm);

			if (userStore.status.code == "200") {
				uni.setStorageSync("user", JSON.stringify(userStore.user))
				uni.switchTab({
					url: "/pages/user/user"
				})
			} else {
				loginFailShow.value = true
				loginForm.schoolId = ''
			}
		}).catch(errors => {
			//表单验证失败

		})
	}
	async function getScoolList() {
		await schoolStore.getSchoolList();
		schoolStore.schoolList.forEach(async (p) => {
			schools.push(p['schoolName'])
		})

	}
	onMounted(() => {
		getScoolList()
	})
</script>

<style lang="scss">
	.login {
		background: url("/static/images/login.jpg") no-repeat center bottom fixed;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.login_content {
			position: relative;
			width: 90%;

			margin: 30rpx auto;
			padding: 20rpx;
			padding-top: 50rpx;
			box-shadow: 20rpx 20rpx 20rpx 20rpx rgba(0, 0, 0, 0.2);
			background-color: rgba(255, 255, 255, 0.7);
			font-size: 35rpx;
			border-radius: 20rpx;
		}
	}
</style>